<template>
    <div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="-1"></el-tab-pane>
                <el-tab-pane label="待付款" name="0"></el-tab-pane>
                <el-tab-pane label="待发货" name="1"></el-tab-pane>
                <el-tab-pane label="待签收" name="2"></el-tab-pane>
                <el-tab-pane label="待确认" name="3"></el-tab-pane>
                <el-tab-pane label="待评论" name="4"></el-tab-pane>
                <el-tab-pane label="已完成" name="5"></el-tab-pane>
                <el-tab-pane label="已取消" name="6"></el-tab-pane>
                <el-tab-pane label="已删除" name="7"></el-tab-pane>
            </el-tabs>
        </div>


        <div style="text-align:left;">
            <!-- <el-table :data="orderListData" style="width: 100%">
                <el-table-column prop="orderNo" label="订单号"></el-table-column>
                <el-table-column prop="memberId" label="买家" width="280"></el-table-column>
                <el-table-column prop="orderAmount" label="订单金额" width="180"></el-table-column>
                <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
                <el-table-column prop="orderState" label="订单状态" width="180"></el-table-column>
                <el-table-column prop="address" label="操作" width="180"></el-table-column>
            </el-table> -->

            <el-checkbox  @change="eventSelectedCheckbox">全选</el-checkbox> 
            <el-button type="danger" @click="eventDeleteAll">批量删除</el-button>
            <div v-for="(item, index) in orderListData" :key="index"
                style="border:1px solid #dcdcdc;background:#fff;margin-bottom:30px;text-align:left;">
                <div style="background:green;color:#fff;padding:5px 0;">
                    <el-row>
                        <el-col :span="1">
                            <el-checkbox  v-model="item.isChecked" :checked="item.isChecked"></el-checkbox>
                        </el-col>
                        <el-col :span="6">订单号：{{ item.orderNo }} </el-col>
                        <el-col :span="5">{{ item.date }}  商品数量：{{ item.products.length }}</el-col>
                        <el-col :span="8">
                            总金额：<span style="color:red;font-size:16px;">￥{{ item.amount.toFixed(2) }}</span>元
                        </el-col>
                        <el-col :span="4" style="text-align:right;">
                            <router-link :to="{path:'/order/detail',query:{id:item.orderNo}}">查看详情</router-link>
                        </el-col>
                    </el-row>                                          
                </div>
                <el-table :data="item.products" style="width: 100%" :show-header="false">
                    <el-table-column prop="id" label="订单号"></el-table-column>
                    <el-table-column prop="skuName" label="商品名称" width="280"></el-table-column>
                    <el-table-column prop="price" label="订单金额" width="180"></el-table-column>
                    <el-table-column prop="number" label="下单时间" width="180"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            allChecked:false,
            activeName: '-1',
            orderListData: [
                {
                    id: 1, orderNo: 'afadsf94593459345', member: '梁**',
                    amount: 99.00, date: '2023/7/4 12:23:58', state: '0',
                    products: [
                        { id: 1, name: '商品1', price: 33.00, number: 1, image: '1.jpg' },
                        { id: 2, name: '商品2', price: 66.00, number: 1, image: '1.jpg' },
                    ],
                    isChecked:false
                },
                {
                    id: 2, orderNo: 'afadsf94593459346', member: '梁**',
                    amount: 99.00, date: '2023/7/4 12:23:58', state: '0',
                    products: [
                        { id: 1, name: '商品1', price: 33.00, number: 1, image: '1.jpg' },
                        { id: 2, name: '商品2', price: 66.00, number: 1, image: '1.jpg' },
                        { id: 3, name: '商品3', price: 66.00, number: 1, image: '1.jpg' },
                    ],
                    isChecked:false
                },
                {
                    id: 3, orderNo: 'afadsf94593459347', member: '梁**',
                    amount: 99.00, date: '2023/7/4 12:23:58', state: '0',
                    products: [
                        { id: 1, name: '商品1', price: 33.00, number: 1, image: '1.jpg' },
                        { id: 2, name: '商品2', price: 66.00, number: 1, image: '1.jpg' },
                    ],
                    isChecked:false
                },
            ], //订单数据列表
        };
    },
    mounted() {
        this.onloadOrderData('-1')
    },
    methods: {
        //批量删除
        eventDeleteAll(){
            this.orderListData.forEach(x=>{
                if(x.isChecked){
                    console.log(x.orderNo);
                }
            })
        },
        //复选框的全选与反选
        eventSelectedCheckbox(val){
            
            this.orderListData.forEach(x=>{
                x.isChecked = val
            })
            //console.log(this.orderListData);
            //this.$set(this.orderListData)
        },
        //加载订单数据
        onloadOrderData(state) {
            let url = 'http://localhost:5068/order'
            this.$http.get(url, {
                params: {
                    state: state
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.orderListData = res.data.data
                }
            })
        },
        //tab标签的点击改变事件
        handleClick(tab, event) {
            console.log(tab, event);
            this.onloadOrderData(tab.name)
        }
    }
};
</script>
